<template>
	<view class="bodyView" :data-theme="dataTheme">
		<view class="loginView">
			<image class="loginImg" src="@/static/Illustration.png" mode=""></image>
			<view class="inputView">
				<input maxlength="11"  class="uniInput" v-model="phoneInput" @input="handleVerifyPhoneNumber" type="number" placeholder="请输入手机号" />  
			</view>
			 
			<view class="correctTip" v-show="!isPhoneCorrect&&phoneInput">
				手机号不合规
			</view>
			  
			<commonButton class="loginButton" @tapclick="handleLogin">
				<text>Login</text> 
			</commonButton>
		</view>
	</view>
</template>

<script setup>
	import { 
		getProducts,
		getAllcomment,
		getHistoryOrders
	} from '~/api/index'
	import commonButton from '@/components/commonButton.vue'
	import useProductStore from '@/store/modules/product'
	import useSystemStore from '@/store/modules/system'
	const systemStore = useSystemStore()
	const {
		dataTheme,
		userInfo,
		myOrders
	} = storeToRefs(systemStore);
	//输入手机号
	let phoneInput=ref('')
	//手机号是否合规
	let isPhoneCorrect=ref(true)
	
	
	
	
	//初始化获取所有产品、评论
	let initData=()=> {
		getProducts({}).then(data => { 
			useProductStore().products = data.data.map(row=>({...row,sellOut:row.sellOut==='true'})) 
		})
		getAllcomment({}).then(data => { 
			useProductStore().comments = data.data 
		})
		getHistoryOrders({phone:userInfo.value.phone}).then(data => {  
			myOrders.value = data.data 
		})
	}
	//登录
	let handleLogin=()=>{ 
		if(!phoneInput.value)
		{
			isPhoneCorrect.value=false
			return
		} 
		 
		if(!verifyPhoneNumber(phoneInput.value))
		{
			isPhoneCorrect.value=false  
			return
		} 
		
		systemStore.login(phoneInput.value).then(data=>{
			initData()
			setTimeout(()=>{
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},300) 
		})
		.catch(e=>{
			uni.$emit('showToast',{
				title:'登录异常' 
			})
			console.log(1231231,e);
		})
	}
	//监听手机输入
	const handleVerifyPhoneNumber = (e) => {
		if(!e.detail.value)
			isPhoneCorrect.value = true
		// if (e.detail.value.length === 11) {
		// 	isPhoneCorrect.value = !e.detail.value ? true : verifyPhoneNumber(e.detail.value)
		// } else
		// 	isPhoneCorrect.value = false
	}
	//手机号验证
	const verifyPhoneNumber = (phone) => {
		let phoneNumberPattern = /^1[3456789]\d{9}$/;
		return phoneNumberPattern.test(phone)
	}
</script>

<style lang="scss" scoped>
	.loginView{
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		@include flex-teng(column);
		padding: $mainPadding;
		@include useTheme {
			background-color: getValue("bgColor");
			color: getValue("textColor");
		}
		.loginImg{
			width: 260rpx;
			height: 200rpx;
		}
		.inputView{
			margin-top:calc($mainPadding * 4);
			width: 100%;
			border-radius: $mainPadding;
			line-height: 104rpx;
			height:104rpx;
			box-sizing: border-box;
			padding: $mainPadding;
			@include flex-teng();
			@include useTheme {
				background-color:  getValue("bottombgColor");
			}
			
			.uniInput{
				width: 100%;
			}
		}
		
		.correctTip{
			height: 20px;
			margin-top: 20rpx;
			font-size: $fontSize3;
			color: $mainColor !important;
		}
	
		.loginButton{
			width: 100%;
			height: 110rpx;
			@include flex-teng;
			background-color: $mainColor;
			border-radius: 20rpx;
			margin-top: $mainPadding;
		}
	}
</style>